<template>
  <q-chip
    v-for="tag in tags"
    :key="tag.label"
    :color="getColorForTag(tag.label)"
  >
    {{ tag.label }}
    <q-tooltip v-if="tag.tip" class="text-body2">{{ tag.tip }}</q-tooltip>
  </q-chip>
</template>

<script setup>
import { ref } from "vue";

const tags = ref([
  {
    label: "全栈",
    tip: "我们公司内推找我，全程呵护，公开透明！",
  },
  {
    label: "健身",
    tip: "银泰in99-DV健身，办卡找我，我去推荐他们会给我返点，嘻嘻，分你一半",
  },
  {
    label: "金铲铲",
    tip: "一起玩游戏，qq区：2857111062",
  },
]);

// 随机生成标签颜色
const getColorForTag = (tag) => {
  // 浅色系颜色数组
  const colors = [
    "light-blue",
    "light-green",
    "light-purple",
    "amber",
    "pink",
    "orange",
  ];
  // 生成简单哈希值
  let hash = 0;
  for (let i = 0; i < tag.length; i++) {
    hash = tag.charCodeAt(i) + ((hash << 5) - hash);
  }
  return colors[Math.abs(hash) % colors.length];
};
</script>
